<template>
  <div class="hello-ezuikit-js">
    <div
      :id="videoId"
      style="width: 100%; min-height: 400px; height: auto"
    ></div>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";

export default {
  props: {
    videoId: { type: String, default: "video-container" },
    videoUrl: { type: String, default: "" },
    accessToken: { type: String, default: "" },
    isShow: { type: Boolean, default: false },
  },
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    // 初始化
    this.initEZUIKit();
  },
  watch: {
    isShow: function (val) {
      console.log(val);
      if (val) {
        // 初始化
        this.initEZUIKit();
      } else {
        if (this.player != null) {
          // 停止播放
          this.player.stop();
        }
      }
    },
  },
  methods: {
    // 初始化
    initEZUIKit() {
      console.log(this.player);

      console.group("mounted 组件挂载完毕状态===============》");
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: this.videoId != null ? this.videoId : "video-container",
        accessToken: this.accessToken,
        url: this.videoUrl,
        //template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        footer: ["hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: 600,
        // height: 400,
      });
    },
  },
};
</script>
